<template>
    <div class="userlist">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>卡片名称</span>
                <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
            </div>
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="地址">
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleEdit(scope.row.id)" type="text" size="small">编辑</el-button>
                        <el-button @click="handleDel(scope.row.id)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
<script>
    export default {
        name: "userlist",
        data() {
            return {
                tableData: [{
                    di: 1,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    di: 2,
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    di: 3,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    di: 4,
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        },
        methods: {
            handleEdit(id) {
                console.log("修改");
            },
            handleDel(id) {
                console.log("删除");
            }
        }
    }
</script>
<style scoped>
    .text{
        font-size: 14px;
    }
    .item{
        margin-bottom: 18px;
    }
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: "";
    }
    .clearfix:after{
        clear: both
    }
    .box-card{
        width: 98%;
        margin: 10px auto;
    }
    .userlist{
        width:100%;
    }
</style>
